<template>
  <div id="plan-detail">

    <div class="goods-card">
      <div class="goods-card-header">
        <div>
          <span class="plan-name">计划名称：{{ detailData.plan_name }}</span>
          <span class="plan-code">计划ID：{{ detailData.plan_code }}</span>
        </div>
        <div>计划状态：<span style="color: red; font-weight: 500;">{{ getTaskStatus(detailData.status) }}</span></div>
      </div>
      <div class="goods-card-body">
        <div class="plan-info-box" v-if="detailData">
          <div class="plan-info-left-box"><img :src="noticeInfo.img" alt="" /></div>
          <div class="plan-info-right-box">
            <div>
              <span class="shop-name" v-if="detailData.blogger">{{ detailData.blogger.name }}</span>
            </div>
            <div>笔记标题：{{ noticeInfo.title}}</div>
            <div>笔记链接：{{ noticeInfo.url }}</div>
            <div class="time-box">
              <span>
                <i class="time-icon el-icon-ali-time"></i>
                <span class="time">
                  开始时间：{{ detailData.start_time == 0 ? '--' : getFormatTime(parseInt(detailData.start_time * 1000)) }} -- 结束时间：{{
                    detailData.end_time == 0 ? '--' : getFormatTime(parseInt(detailData.end_time * 1000))
                  }}
                </span>
              </span>
              <span>
                <i class="time-icon el-icon-ali-time"></i>
                <span class="time">终止时间：{{ detailData.over_time == 0 ? '--' : getFormatTime(parseInt(detailData.over_time * 1000)) }}</span>
              </span>
            </div>
            <div>备注说明：{{detailData.remark}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="detail-card">
      <div class="detail-card-header">
        <div class="title">任务完成详情</div>
      </div>
      <div class="detail-card-body">
        <el-table :data="commentOrderDetail" border size="mini">
          <el-table-column prop="task_code" label="任务编号"></el-table-column>
          <el-table-column prop="begin_time" label="任务开始时间"></el-table-column>
          <el-table-column prop="status_name" label="任务状态"></el-table-column>
          <el-table-column prop="check_status_name" label="审核状态"></el-table-column>
          <el-table-column prop="entrance_type" label="入口类型" :formatter="getEntranceType"></el-table-column>
          <el-table-column prop="keyword" label="关键词">
            <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.entrance_type == 3">
              <img class="keyword-preview-img" :src="scope.row.keyword"/>
              <img slot="reference" :src="scope.row.keyword"  style="width: 50px;height: 50px">
            </el-popover>
            <div v-else>
              {{scope.row.keyword}}
            </div>
          </el-table-column>
          <el-table-column prop="xhs_name" label="粉丝账号"></el-table-column>
          <el-table-column prop="commission" label="佣金"></el-table-column>
          <el-table-column prop="over_time" label="完成时间"></el-table-column>
          <el-table-column prop="collect_img" label="收藏图">
            <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.collect_img">
              <img class="flow-preview-img" :src="scope.row.collect_img"/>
              <img slot="reference" :src="scope.row.collect_img"  style="width: 50px;height: 50px">
            </el-popover>
          </el-table-column>
          <el-table-column prop="add_cart_img" label="加购图" >
            <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.add_cart_img">
              <img class="flow-preview-img" :src="scope.row.add_cart_img"/>
              <img slot="reference" :src="scope.row.add_cart_img"  style="width: 50px;height: 50px">
            </el-popover>
          </el-table-column>
          <el-table-column prop="attention_img" label="关注图" >
            <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.attention_img">
              <img class="flow-preview-img" :src="scope.row.attention_img"/>
              <img slot="reference" :src="scope.row.attention_img"  style="width: 50px;height: 50px">
            </el-popover>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="detail-card">
      <div class="detail-card-header">
        <div class="title">设置任务信息(任务单数)</div>
      </div>
      <div class="detail-card-body">
        <el-table  :data="taskCompletionProgress" border size="mini">
         <el-table-column prop="allNum" label="总数">
           <template slot-scope="scope">
             <div @click="toOrdersListPage('/flowManage/allOrder')" style="cursor: pointer;">{{scope.row.waitingComply}}</div>
           </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" prop="waitingComply" label="等待执行">
           <template slot-scope="scope">
             <div @click="toOrdersListPage('/flowManage/waitingOrder')" style="cursor: pointer;">{{scope.row.waitingComply}}</div>
           </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" prop="missedOrder" label="已派单未领取">
           <template slot-scope="scope">
             <div @click="toOrdersListPage('/flowManage/waitReceiveOrder')" style="cursor: pointer;">{{scope.row.missedOrder}}</div>
           </template>
         </el-table-column>

         <el-table-column :show-overflow-tooltip="true" prop="operating" label="正在执行">
           <template slot-scope="scope">
             <div @click="toOrdersListPage('/flowManage/beingExecutedOrder')" style="cursor: pointer;">{{scope.row.operating}}</div>
           </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" prop="pendingReview" label="待审核">
           <template slot-scope="scope">
             <div @click="toOrdersListPage('/flowManage/waitCheckOrder')" style="cursor: pointer;">{{scope.row.pendingReview}}</div>
           </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" prop="reviewSuccess" label="审核成功">
           <template slot-scope="scope">
             <div @click="toOrdersListPage('/flowManage/successOrder')" style="cursor: pointer;">{{scope.row.reviewSuccess}}</div>
           </template>
         </el-table-column>
         <el-table-column :show-overflow-tooltip="true" prop="fail" label="已失败">
           <template slot-scope="scope">
             <div @click="toOrdersListPage('/flowManage/failOrder')" style="cursor: pointer;">{{scope.row.fail}}</div>
           </template>
         </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="detail-card">
      <div class="detail-card-header">
        <div class="title">任务清单</div>
      </div>
      <div class="detail-card-body">
        <el-table :data="salesTaskList" border size="mini">
          <el-table-column prop="commission" label="佣金"></el-table-column>
          <el-table-column prop="additionalCommission" label="额外佣金"></el-table-column>
          <el-table-column prop="freezeAmount" label="本次合计需冻结金额"></el-table-column>
        </el-table>
      </div>
    </div>

    <div class="page-footer" v-if="isShowRevokeBtn">
      <el-button class="revoke-btn" @click="revokeTask">撤销未完成任务</el-button>
    </div>
  </div>
</template>

<script>
import {
  apiFlowRevokeSalePlan,
  apiCommentDetail
} from '../../request/api.js'

import Edit from "../../components/edit/Edit";

export default {
  components: {
    Edit
  },
  data() {
    return {
      detailData: {},
      noticeInfo: {},
      planId: this.$route.query.id,
      // 任务进度
      taskCompletionProgress: [
        {
          allNum: 0,
          waitingComply: 0,
          missedOrder: 0,
          operating: 0,
          pendingReview: 0,
          reviewSuccess: 0,
          fail: 0
        }
      ],
      isShowRevokeBtn: true,
      commentOrderDetail: [],
      entranceType: {
        1: '关键词',
        2: '口令',
        3: '二维码',
        4: '直播',
        5: '其他',
        6: '店铺名'
      },
      salesTaskList: [
        {
          commission: 0,
          additionalCommission: 0,
          freezeAmount: 0
        }
      ],
      userToken: window.localStorage.getItem('token')
    };
  },
  watch: {
    immediate: true
  },
  created() {
    this.getCommentPlanDetail();
  },
  methods: {
    getEntranceType(row) {
      return this.entranceType[row.entrance_type];
    },

    getTaskStatus(val) {
      let text = ''
      switch (val) {
        case 1:
          text = '等待执行';
          break;
        case 2:
          text = '正在执行';
          break;
        case 3:
          text = '执行完成';
          break;
        case 4:
          text = '人工终止';
          break;
        case 5:
          text = '创建中';
          break;
        default:
          text = '全部计划';
          break;
      }
      return text;
    },

    toOrdersListPage(path){
      // this.$router.push(path);
    },
    getCommentPlanDetail() {
      this.$isClick(true);
      apiCommentDetail({
        token: this.userToken,
        id: this.planId
      }).then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.detailData = res.msg;
            this.noticeInfo = this.detailData.notice;
            this.commentOrderDetail = this.detailData.commentTaskList;
            this.getSetInfoData();
            this.salesTaskList[0].commission = this.detailData.pay.commission;
            this.salesTaskList[0].additionalCommission = this.detailData.pay.extra_commission;
            this.salesTaskList[0].freezeAmount = this.detailData.pay.all_pay_money;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },

    getSetInfoData() {
      //任务信息
      this.taskCompletionProgress[0].allNum = this.detailData.all_num;
      this.taskCompletionProgress[0].waitingComply = this.detailData.wait_num;
      this.taskCompletionProgress[0].missedOrder = this.detailData.wait_get_num;
      this.taskCompletionProgress[0].operating = this.detailData.real_num;
      this.taskCompletionProgress[0].pendingReview = this.detailData.wait_check_num;
      this.taskCompletionProgress[0].reviewSuccess = this.detailData.success_num;
      this.taskCompletionProgress[0].fail = this.detailData.fail_num;
      if (this.taskCompletionProgress[0].waitingComply == 0 && this.taskCompletionProgress[0].missedOrder == 0) {
        this.isShowRevokeBtn = false;
      } else {
        this.isShowRevokeBtn = true;
      }
    },

    revokeTask() {
      this.$confirm('此操作将永久撤销该计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.$isClick(true);
          apiFlowRevokeSalePlan({
            token: this.userToken,
            id: this.planId
          }).then(res => {
              this.$isClick(false);
              if (res.code == 1) {
                this.$message.success(res.msg);
                this.$router.push('./flowPlanList');
              } else {
                this.$message.error(res.msg);
              }
            }).catch(res => {
              this.$isClick(false);
              this.$message.error(res.msg);
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });
        });
    },

    getFormatTime(date) {
      date = new Date(date);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }
  }
};
</script>

<style lang="less">
#plan-detail {
  .goods-card {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    .goods-card-header {
      background: #ecf5ff;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: @fontTitleColor;
      .plan-code {
        margin-left: 50px;
      }
    }
    .goods-card-body {
      .plan-info-box {
        background: #ffffff;
        display: flex;
        align-items: center;
        padding: 16px;
        color: @fontSubtitleColor;
        font-size: 14px;
        .plan-info-left-box {
          img {
            width: 180px;
            height: 180px;
          }
        }
        .plan-info-right-box {
          margin-left: 16px;
          line-height: 30px;
          .platform-img {
            vertical-align: middle;
            margin-right: 10px;
            &.el-icon-ali-tb {
              color: rgb(253, 77, 15);
            }
            &.el-icon-ali-jd {
              color: rgb(241, 48, 24);
            }
            &.el-icon-ali-pdd {
              color: rgb(240, 16, 15);
            }
            &.el-icon-ali-tm {
              color: rgb(253, 17, 39);
            }
            &.el-icon-ali-wph {
              color: rgb(219, 16, 113);
            }
            &.el-icon-ali-1688_icon {
              color: rgb(255, 103, 4);
            }
            font-size: 25px;
          }
          .time-box {
            .time-icon {
              font-size: 14px;
              margin-right: 5px;
            }
            .time {
              margin-right: 20px;
            }
          }
          .other-param {
            span {
              margin-right: 50px;
            }
          }
        }
      }
    }

  }
  .detail-card {
    margin-top: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    padding-bottom: 16px;
    border-radius: 5px;
    .detail-card-header {
      background: #ecf5ff;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .title {
        line-height: 20px;
        border-left: 3px solid #666666;
        padding-left: 10px;
        font-size: 16px;
        font-weight: 700;
        color: #333333;

      }
      .tips {
        font-size: 14px;
        color: red;
        margin-left: 50px;
      }
    }
    .detail-card-body {
      padding: 0 16px;
      .el-table .cell {
         text-align: center;
      }
      .el-table thead tr, .el-table thead tr th{
      	background: #f5f7fa!important;
      }
      .el-table td, .el-table th {
      	padding: 9px 0 !important;
      }

    }
  }
  .page-footer {
    text-align: center;
    margin-top: 16px;
    .revoke-btn {
      background: @themeColor;
      color: #FFFFFF;
      padding: 12px 20px;
    }
  }
}
.el-popover {
  .keyword-preview-img {
    width: 150px;
    height: 150px;
  }
  .flow-preview-img {
    width: 150px;
    height: 200px;
  }
}
.appeal-btn {
  background: red;
  color: #fff;
  padding: 8px 15px !important;
  margin-left: 0 !important;
}
</style>
